<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.content-list {
				position: absolute;
				width: 100%;
			}
			.content-list-ul {
				display: grid;
				margin-top: 5px;
				margin-left: 25px;
				margin-right: 25px;
				grid-template-columns: repeat(7, minmax(0,1fr));
				grid-template-rows: max-content;
				height: calc(100% - 40px);
				gap: 24px;
			}
			@media screen and (max-width: 1920px) {
				.project-list-ul {
					grid-template-columns: repeat(5, minmax(0,1fr));
				}
			}
			li{
				list-style: none;
				background-color: red;
				height: 200px;
				line-height: 200px;
				color: #fff;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="content-list">
			<ul class="content-list-ul">
			</ul>
		</div>
		
		<script>
			// 我们经常遇到一些for循环的数据展示，当我们的屏幕尺寸不固定时，就可能出现一下问题，这个时候我们可以使用grid
			
			let ul = document.querySelector('ul')
			console.log(ul)
			for (var i = 0; i < 50; i++) {
				let li = document.createElement('li');
				li.innerHTML = `${i+1}`
				ul.append(li)
			}
		</script>
	</body>
</html>